<template>
	<view class="pageCont">

		<z-paging ref="paging" @query="queryList" :list.sync="houseData" :style="{height: scrollHeight+'px'}">
			<view slot="loading">
				<view class="ymref">
					<view class="">
						<u-loading mode="circle" color="#f44c01" size="80"></u-loading>
					</view>
				</view>
			</view>
			<view>
				<HouseList :houseData="houseData"></HouseList>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import HouseList from '@/components/HouseList/HouseList.vue';
	export default {
		components: {
			HouseList
		},
		data() {
			return {
				search: {
					type: 'house',
					huxing: '',
					zujin: '',
					mianji: '',
					zhuangxiu: '',
					tagIds: '',
					userType: '出租',
					pageNum:1
				},
				options1: [{
					"label": "全部",
					"value": ""
				}, {
					"label": "1室0厅0卫",
					"value": "1室0厅0卫",
				}, {
					"label": "1室1厅1卫",
					"value": "1室1厅1卫",
				}, {
					"label": "2室1厅1卫",
					"value": "2室1厅1卫",
				}, {
					"label": "3室1厅1卫",
					"value": "3室1厅1卫",
				}, {
					"label": "3室2厅1卫",
					"value": "3室2厅1卫",
				}, {
                 					"label": "3室2厅2卫",
                 					"value": "3室2厅2卫",
                 				}],
				options2: [{
						"label": "不限",
						"value": ""
					},
					{
						"label": "1000",
						"value": "1000"
					},
					{
						"label": "1500",
						"value": "1500"
					},
					{
						"label": "2000",
						"value": "2000"
					},
					{
						"label": "2500",
						"value": "2500"
					},
					{
						"label": "3000",
						"value": "3000"
					}
					,
                    					{
                    						"label": "3500",
                    						"value": "3500"
                    					}
                    					,
                                        					{
                                        						"label": "4000",
                                        						"value": "4000"
                                        					}
				],
				acreageTag: [{
						"label": "50㎡",
						"value": "50"
					},
					{
						"label": "60㎡",
						"value": "60"
					}, {
						"label": "70㎡",
						"value": "70"
					}, {
						"label": "80㎡",
						"value": "80"
					},
					{
						"label": "90㎡",
						"value": "90"
					}, {
						"label": "100㎡",
						"value": "100"
					}, {
                     						"label": "120㎡",
                     						"value": "120"
                     					}
				],
				decorationTag: [{
						"label": "毛坯",
						"value": "毛坯",
					},
					{
						"label": "简装",
						"value": "简装",
					}, {
						"label": "精装",
						"value": "精装",
					}
				],
				labelTag: [
				],
				scrollHeight: 500,
				houseData: [],
			}
		},
		onLoad(e) {
		console.log(e)
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					let windowHeight = res.windowHeight;
					let windowWidth = res.windowWidth;
					let headHeight = 80 / 750 * windowWidth;
					let scrollHeight = (windowHeight - headHeight);
					that.scrollHeight = scrollHeight;
				}
			});
			if (e.type) {
				this.search.type = e.type;
			}
			if (e.userType) {
			if('出售'==e.userType){
                this.getLabels('house_sell_label')
			}else{
			  this.getLabels('house_rent_label')
			}
				this.search.userType = e.userType;
			}


		},
		methods: {
		getLabels(type) {
        				this.$u.get('/home/getLabel', {
        					'dictType': type
        				}).then(res => {
        					this.labelTag = res;
        				})
        			},
			seltag(type, item) {
				if (type === 'mianji') {
					this.search.mianji = item.value;
				}
				if (type === 'zhuangxiu') {
					this.search.zhuangxiu = item.value;
				}
				if (type === 'label') {
					this.search.tagIds = item.dictLabel;
				}
			},
			resSearch() {
				this.search.mianji = '';
				this.search.zhuangxiu = '';
				this.search.tagIds = '';
			},
			subSearch() {
				this.$refs.paging.reload();
				this.$refs.uDropdown.close();
			},
			refload(e){
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//通过this.$refs.paging.complete(请求回来的数组);将请求结果传给z-paging
				this.search.pageNum = pageNo;
				this.$u.get('/home/room/list', this.search).then(res => {
					this.$refs.paging.complete(res)
				}).catch(err => {
					this.$refs.paging.complete(false)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageCont {
		height: 100%;
		width: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #F8F8F8;
	}

	.slot-content {
		background-color: white;

		.slot-cell {
			display: flex;
			flex-direction: column;
			padding: 20rpx;

			.gird {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.gitem {
					width: 226.6rpx;
					height: 80rpx;
					background-color: #e1e1e1;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					margin: 5rpx;
					border-radius: 10rpx;
					font-size: 30rpx;
				}

				.active {
					background-color: #F44C01;
					color: white;
				}
			}
		}

		.cellbtn {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			padding: 20rpx;

			.btn {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 260rpx;
				height: 90rpx;
				border-radius: 50rpx;
				border: 1rpx solid #e6e6e6;
				font-size: 32rpx;
			}

			.btn1 {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 260rpx;
				height: 90rpx;
				border-radius: 50rpx;
				background-color: #F44C01;
				color: white;
				font-size: 32rpx;
			}
		}
	}
</style>
